<template>
	<view>
		<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
			<text class="text-school-name">{{schoolName}}</text>
		</view>
		<view class="uni-center">
			<image class="image" mode="aspectFill" :src="headimgurl" />
			<!-- <image class="image" mode="aspectFill" src="../../static/logo.png" /> -->
		</view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="uni-list" style="background-color: #F1F1F1;">
				<view class="uni-list-cell uni-row vshcool-white-bg">
					<text class="vshcool-text-input-name">手机号</text>
					<input class="uni-input v-mod vshcool-input" v-model="telephone" name="telephone" type="number" maxlength="11"
					 placeholder="请输入手机号" />
				</view>
				<view class="uni-list-cell uni-row vshcool-white-bg">
					<text class="vshcool-text-input-name">密&nbsp;&nbsp;&nbsp;码</text>
					<input class="uni-input vshcool-input" v-model="password" name="password" maxlength="16" placeholder="请输入密码"
					 :password="showPassword" />
					<text class="uni-icon vshcool-eye-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">&#xe568;</text>
				</view>
				<view class="uni-list-cell uni-row vshcool-white-bg">
					<text class="vshcool-text-input-name">验证码</text>
					<input class="uni-input vshcool-input" name="valCode" type="number" maxlength="4" placeholder="请输入验证码" />
					<img :src="codeImg" @click="getCode" height="25px">
					<!-- <button style="border: none;" type="primary" plain="true">获取验证码</button> -->
				</view>
			</view>
			<view class="vshcool-warning-view">
				<text class="vshcool-warning-text">{{warning}}</text>
			</view>
			<button form-type="submit" style="margin:20px ;" type="primary" :loading="loading" :disabled="loading">登录</button>
		</form>
		<view class="uni-flex uni-row">
			<button style="border: none; font-size: 16px;" type="primary" plain="true">忘记密码？</button>
			<view style="flex: 1"></view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	var graceChecker = require("../../../common/graceChecker.js");
	export default {

		onLoad: function(options) {
		},
		onShow: function() {
			this.getCode()
			this.findCampus()
			let routes = getCurrentPages();
			let curRoute = routes[routes.length - 1].route
			console.log(curRoute)
		},
		data() {
			return {
				link: window.location.href,
				// openId: null,
				// headimgurl: null,
				showPassword: true,
				telephone: process.env.NODE_ENV === 'development' ? 18285154655 : '',
				password: process.env.NODE_ENV === 'development' ? '18285154655' : '',
				warning: '',
				codeImg: '',
				loading: false,
				schoolName: '',
			}
		},
		computed: {
			...mapState({
				openId: 'openId',
				headimgurl: 'headimgurl',
				schoolId: 'schoolId',
				token: 'token'
			}),
		},
		methods: {
		// test1 模块路径名
		    ...mapActions('parents', [
		      'setToken'
		    ]),
			// ...mapMutations(['setToken']),
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			getCode() {
				console.log(this.token)
				// return
				this.$api.getPicCode().then((res) => {
					// console.log(res)
					// this.res = '请求结果 : ' + JSON.stringify(res);
					if (typeof res == "string") { //成功
						this.codeImg = 'data:image/png;base64,' + res
						console.log(this.codeImg)
						console.log(typeof this.codeImg)
					} else {
						console.log('getCode fail code: ', res.code);
					}

				}).catch((err) => {
					console.log('getCode fail', err);
				})
			},
			findCampus() {
				this.$api.findCampus( '?id=' + this.schoolId).then((res) => {
					console.log(res)
					console.log(typeof res)
					// this.res = '请求结果 : ' + JSON.stringify(res);
					if (typeof res == "object") { //成功
						// console.log(this.codeImg)
						// console.log(typeof this.codeImg)
						this.schoolName = res.name
					} else {
						console.log('getCode fail code: ', res.code);
					}

				}).catch((err) => {
					console.log('getCode fail', err);
				})
			},
			formSubmit(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				//定义表单规则
				var rule = [{
						name: "telephone",
						checkType: "phoneno",
						errorMsg: "请输入11位手机号码"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "8,16",
						errorMsg: "请输入8-16位密码"
					},
					{
						name: "valCode",
						checkType: "string",
						checkRule: "4",
						errorMsg: "请示输入4位验证码"
					}
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					var data = {
						"telephone": this.telephone,
						"password": this.password,
						"openId": this.openId,
						"valCode": formData.valCode
					}
					this.login(data)
				} else {
					// uni.showToast({ title: graceChecker.error, icon: "none" });
					this.warning = graceChecker.error
				}
			},
			login(data) {
				this.loading = true;
				this.$api.teacherAccountLogin(data).then((res) => {
					this.loading = false;
					// console.log(res)
					// this.res = '请求结果 : ' + JSON.stringify(res);
					//成功
						console.log(this.$store)
					if (typeof res == "string") {
						// this.$store.parents;
						this["setToken"](res)
						// this.setToken(res)
						uni.reLaunch({
							url: "../index/index",
							fail: (e) => {
								console.log(e)
							}
						})
					} else {
						this.warning = res.msg
						// uni.showToast({
						// 	title: res.msg,
						// 	icon:'none',
						// })
					}

				}).catch((err) => {
					this.loading = false;
					console.log('login fail', err);
				})
			},
		},

	}
</script>

<style>
	page {
		background-color: #F1F1F1;
	}

	.text-school-name {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		font-size: 20px;
		font-weight: 500;
		line-height: 20px;
	}

	.image {
		/* margin:40px 0; */
		width: 100px;
		height: 100px;
		margin-bottom: 16px;
	}

	.vshcool-white-bg {
		background-color: #ffffff;
	}

	.vshcool-text-input-name {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 16px;
		line-height: 10px;
	}

	.vshcool-input {
		font-size: 16px;
	}

	.vshcool-eye-icon {
		/* background-color: #000000 ; */
		padding-right: 16px;
	}

	.vshcool-warning-view {
		height: 25px;
		margin: 16px;
	}

	.vshcool-warning-text {
		font-size: 16px;
		color: #FF3333;
	}

	.uni-eye-active {
		color: #007AFF;
	}
</style>
